import { defineStore } from "pinia";
const useTodosStore = defineStore("todos", {
  state: () => ({
    list: JSON.parse(localStorage.getItem("todos")) || [],
    filters: ["All", "Active", "Completed"],
    active: "All",
  }),

  /* 
    全选反选
    1. 根据list的每一项，计算出当前是否全选了
    2. 在全选按钮改变时(@change触发，会携带参数，代表的对象)，传递对象的 e.target.checked，
      list所有的数据，改成这个状态
  */

  /* 
        底部计算
        1. 先定义好状态的数组 filters: ["All", "Active", "Completed"]
        2. 记得当前状态 active
        3. 绑定事件 changeActive ，点击状态时，要当前状态告诉我保存
        4. 通过计算属性，把符合当前状态的 showList 计算出来
        5. todoMain 使用符合状态的 showList 做渲染
      */
  getters: {
    // 全选，依赖于list的每一项
    isCheckAll() {
      // every，每一项都符合，才返回true
      return this.list.length > 0 && this.list.every((v) => v.done);
    },
    // 未完成的数量，依赖于list的done
    leftCount() {
      return this.list.filter((v) => !v.done).length;
    },
    showList() {
      if (this.active === "All") {
        return this.list;
      } else if (this.active === "Active") {
        return this.list.filter((v) => !v.done);
      } else if (this.active === "Completed") {
        return this.list.filter((v) => v.done);
      }
    },
  },

  actions: {
    changeDone(id) {
      const obj = this.list.find((v) => v.id === id);
      obj.done = !obj.done;
      // console.log("obj", obj);
    },
    del(id) {
      this.list = this.list.filter((v) => v.id !== id);
    },
    add(name) {
      this.list.unshift({
        id: +new Date(),
        name,
        done: false,
      });
    },
    changeAll(bl) {
      this.list.forEach((item) => (item.done = bl));
    },
    // 清理已完成------->把未完成的留下来
    clearTodo() {
      this.list = this.list.filter((v) => !v.done);
    },
    changeActive(active) {
      console.log("active", active);
      this.active = active;
    },
  },
});

export default useTodosStore;
